<template>
  <div class="sub-tabs">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="收藏讨论" name="discussions">
        <div class="favorite-discussions">
          <el-card v-for="(discussion, index) in favoriteDiscussions" :key="index" class="discussion-card">
            <div class="discussion-content">
              <h3 class="discussion-title" @click="viewDiscussion(discussion)">{{ discussion.title }}</h3>
              <p class="discussion-excerpt">{{ discussion.content }}</p>
              <div class="discussion-meta">
                <span>{{ discussion.author }}</span>
                <span>{{ discussion.createdAt }}</span>
                <div class="discussion-stats">
                  <span><el-icon><View /></el-icon> {{ discussion.views }}</span>
                  <span><el-icon><ChatDotRound /></el-icon> {{ discussion.comments }}</span>
                  <span><el-icon><Star /></el-icon> {{ discussion.favorites }}</span>
                </div>
              </div>
            </div>
            <div class="discussion-actions">
              <el-button type="primary" size="small" @click="viewDiscussion(discussion)">查看讨论</el-button>
              <el-button type="danger" size="small" @click="removeFavoriteDiscussion(discussion)">取消收藏</el-button>
            </div>
          </el-card>
        </div>
        
        <div class="empty-data" v-if="favoriteDiscussions.length === 0">
          <el-empty description="暂无收藏讨论"></el-empty>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="收藏问题" name="questions">
        <div class="favorite-questions">
          <el-card v-for="(question, index) in favoriteQuestions" :key="index" class="question-card">
            <div class="question-content">
              <h3 class="question-title" @click="viewQuestion(question)">{{ question.title }}</h3>
              <p class="question-excerpt">{{ question.content }}</p>
              <div class="question-meta">
                <span>{{ question.author }}</span>
                <span>{{ question.createdAt }}</span>
                <div class="question-stats">
                  <span><el-icon><View /></el-icon> {{ question.views }}</span>
                  <span><el-icon><ChatDotRound /></el-icon> {{ question.answers }}</span>
                  <span><el-icon><Star /></el-icon> {{ question.favorites }}</span>
                </div>
              </div>
            </div>
            <div class="question-actions">
              <el-button type="primary" size="small" @click="viewQuestion(question)">查看问题</el-button>
              <el-button type="danger" size="small" @click="removeFavoriteQuestion(question)">取消收藏</el-button>
            </div>
          </el-card>
        </div>
        
        <div class="empty-data" v-if="favoriteQuestions.length === 0">
          <el-empty description="暂无收藏问题"></el-empty>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="收藏笔记" name="notes">
        <div class="favorite-notes">
          <el-card v-for="(note, index) in favoriteNotes" :key="index" class="note-card">
            <div class="note-content">
              <h3 class="note-title" @click="viewNote(note)">{{ note.title }}</h3>
              <p class="note-excerpt">{{ note.content }}</p>
              <div class="note-meta">
                <span>{{ note.author }}</span>
                <span>{{ note.createdAt }}</span>
                <div class="note-stats">
                  <span><el-icon><View /></el-icon> {{ note.views }}</span>
                  <span><el-icon><Star /></el-icon> {{ note.favorites }}</span>
                </div>
              </div>
            </div>
            <div class="note-actions">
              <el-button type="primary" size="small" @click="viewNote(note)">查看笔记</el-button>
              <el-button type="danger" size="small" @click="removeFavoriteNote(note)">取消收藏</el-button>
            </div>
          </el-card>
        </div>
        
        <div class="empty-data" v-if="favoriteNotes.length === 0">
          <el-empty description="暂无收藏笔记"></el-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { View, ChatDotRound, Star } from '@element-plus/icons-vue';

const router = useRouter();
const activeTab = ref('discussions');

const props = defineProps({
  favoriteDiscussions: {
    type: Array,
    default: () => []
  },
  favoriteQuestions: {
    type: Array,
    default: () => []
  },
  favoriteNotes: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits([
  'remove-favorite-discussion', 
  'remove-favorite-question', 
  'remove-favorite-note'
]);

// 方法：查看讨论
const viewDiscussion = (discussion) => {
  router.push(`/community/discussion/${discussion.id}`);
};

// 方法：取消收藏讨论
const removeFavoriteDiscussion = (discussion) => {
  emit('remove-favorite-discussion', discussion);
};

// 方法：查看问题
const viewQuestion = (question) => {
  router.push(`/community/question/${question.id}`);
};

// 方法：取消收藏问题
const removeFavoriteQuestion = (question) => {
  emit('remove-favorite-question', question);
};

// 方法：查看笔记
const viewNote = (note) => {
  router.push(`/notes/${note.id}`);
};

// 方法：取消收藏笔记
const removeFavoriteNote = (note) => {
  emit('remove-favorite-note', note);
};
</script>

<style scoped>
.sub-tabs {
  margin-top: 20px;
}

/* 卡片样式 */
.discussion-card, .question-card, .note-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.discussion-card:hover, .question-card:hover, .note-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.discussion-content, .question-content, .note-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.discussion-title, .question-title, .note-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  cursor: pointer;
  color: #303133;
}

.discussion-title:hover, .question-title:hover, .note-title:hover {
  color: #409EFF;
}

.discussion-excerpt, .question-excerpt, .note-excerpt {
  color: #606266;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.discussion-meta, .question-meta, .note-meta {
  display: flex;
  color: #909399;
  font-size: 13px;
  align-items: center;
}

.discussion-meta span, .question-meta span, .note-meta span {
  margin-right: 15px;
}

.discussion-stats, .question-stats, .note-stats {
  display: flex;
  margin-left: auto;
}

.discussion-stats span, .question-stats span, .note-stats span {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.discussion-stats .el-icon, .question-stats .el-icon, .note-stats .el-icon {
  margin-right: 5px;
}

.discussion-actions, .question-actions, .note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 空数据样式 */
.empty-data {
  padding: 30px 0;
}
</style>